<style>
.topSearch {
    position: relative;
    height: 50px;
    width: 30%;
    left: 50%;
    margin: 25px 0;
    transform: translate(-50%, 0%);
    z-index: 98;
}

.searchType {
    position: relative;
    width: 90%;
    left: 50%;
    margin: 25px 0;
    border-bottom: #f0f0f2 solid 1px;
    transform: translate(-50%, 0%);
    display: flex;
    align-items: center;
    color: #62666c;

    .searchType_option {
        background: white !important;
        padding: 6px 10px;
        margin: 5px;
        position: relative;

        .selected_svg {
            position: absolute;
            top: 20px;
            left: 0px;
            z-index: 0;
        }
    }
}

.supplement_filter {
    position: relative;
    width: 90%;
    left: 50%;
    margin: 25px 0;
    /* border-bottom: #f0f0f2 solid 1px; */
    transform: translate(-50%, 0%);

    .filter_row {
        display: flex;
        align-items: center;
        margin-right: 80px;
        color: #62666c;

        .filter_option {
            padding: 6px 10px;
            margin: 5px;
        }

        .onMore {
            position: absolute;
            right: 0;
            padding: 5px;
            border: #e3e5e7 solid 1px;
            border-radius: 5px;
            background: #ffffff;
            display: flex;
            align-items: center;

            /* transition: background 1s ease; */
            #rotateImg {
                height: 17px;
                transition: transform 1s ease;
                /* 添加过渡效果，持续1秒 */
            }

            /* 点击后旋转180度 */
            .rotated {
                transform: rotate(180deg);
            }
        }

        .onMore:hover {
            background: #e3e5e7;
        }

        .onMore:active {
            font-size: 12px;
        }
    }
}

.search_result {
    position: absolute;
    left: 50%;
    top: -110px;
    width: 90%;
    transform: translate(-50%, 0%);
    transition: top 1s ease;
    background: white;
}

.search_result_translate {
    top: 0 !important;
}

.user_result {
    position: absolute;
    left: 50%;
    /* top: -110px; */
    width: 90%;
    transform: translate(-50%, 0%);
    background: white;
    transition: top 1s ease;
    display: flex;
    flex-wrap: wrap;


}

.selected {
    color: #4eabe6;
    background: #e3f5fc;
    border-radius: 5px;
}
</style>
<template>
    <div style="background: white;">
        <HomeTop style="position: sticky;top: 0; z-index: 99;" />
        <div class="topSearch">
            <SearchInput :inputValue="searchContent" style="height: 100%;"></SearchInput>
        </div>
        <!-- <div style="height: 1000px;"></div> -->
        <div class="searchType">
            <div class="searchType_option" v-for="(item, index) in searchMainList" :key="index"
                :class="{ selected: item.value == supplementInput.main }" @click="supplementInput.main = item.value">
                <div>
                    {{ item.label }}
                </div>
                <div class="selected_svg">
                    <svg width="62" height="30" xmlns="http://www.w3.org/2000/svg"
                        v-if="item.value == supplementInput.main">
                        <path id="arc" fill="none" stroke="#69c2ec" stroke-width="5" d="M5 15 Q 25 5, 45 15"
                            stroke-dasharray="0 1000">
                            <animate attributeName="stroke-dasharray" from="0 1000" to="1000 0" dur="10"
                                repeatCount="indefinite" />
                        </path>
                    </svg>
                </div>
            </div>
        </div>
        <div class="supplement_filter">
            <div class="filter_row" v-show="supplementInput.main == '0'">
                <div class="filter_option" v-for="(item, index) in postOrderType" :key="index"
                    :class="{ selected: item.value == supplementInput.orderTpye }"
                    @click="supplementInput.orderTpye = item.value">
                    {{ item.label }}
                </div>
                <button class="onMore" @click="rotateImage">
                    更多筛选
                    <img id="rotateImg" src="../assets/image/zhankai.png" alt="">
                </button>
            </div>
            <div class="filter_row" v-show="supplementInput.main == '0'">
                <div class="filter_option" v-for="(item, index) in searchArticleTypeList" :key="index"
                    :class="{ selected: item.value == supplementInput.articleType }"
                    @click="supplementInput.articleType = item.value">
                    <div>
                        {{ item.label }}
                    </div>
                </div>
            </div>
            <div class="filter_row" v-show="supplementInput.main == '0'">
                <div class="filter_option" v-for="(item, index) in searchCategoryList" :key="index"
                    :class="{ selected: item.value == supplementInput.category }"
                    @click="supplementInput.category = item.value">
                    <div>
                        {{ item.label }}
                    </div>
                </div>
            </div>
            <div class="filter_row" v-show="supplementInput.main == '1'">
                <div class="filter_option" v-for="(item, index) in userOrderType" :key="index"
                    :class="{ selected: item.value == supplementInput.userOrderType }"
                    @click="supplementInput.userOrderType = item.value">
                    <div>
                        {{ item.label }}
                    </div>
                </div>
            </div>
        </div>
        <div style="position: relative;" v-show="supplementInput.main == '0'">
            <div class="search_result" id="search_result">
                <div v-for="(item, index) in postItemData" :key="item.id" @click="toDetail(item.id)">
                    <PostItem :post="item" style="width: 100%;" />
                </div>
            </div>
        </div>
        <div style="position: relative;" v-show="supplementInput.main == '1'">
            <div class="user_result" id="user_result">
                <userSearchResult :userInfo="item" v-for="(item, index) in userItemData" :key="index">
                </userSearchResult>
            </div>
        </div>
    </div>
</template>
<script>
import HomeTop from '../components/HomeTop.vue'
import SearchInput from '@/components/SearchInput.vue';
import { CategoryEnum, ArticleTypeEnum } from '@/utils/commonEnum';
import PostItem from '../components/PostItem.vue'
import request from '@/utils/request';
import { newPage } from '@/utils/commonFunction';
import userSearchResult from '@/components/userSearchResult.vue';
export default {
    components: {
        SearchInput,
        HomeTop,
        PostItem,
        userSearchResult
    },
    props: {

    },
    watch: {
        '$route'(to, from) {
            document.title = `${this.$route.query.searchContent}` + " - (*≧▽≦) 我就知道你要搜这个";
            this.searchContent = this.$route.query.searchContent;
            this.search(this.supplementInput.main);
        },
        supplementInput: {
            handler(to, from) {
                this.search(this.supplementInput.main);
            },
            deep: true // 启用深度监听
        },

    },
    created() {
        this.searchContent = this.$route.query.searchContent;
        this.search(this.supplementInput.main);
        this.searchRemember();
    },
    mounted() {
        document.title = `${this.$route.query.searchContent}` + " - (*≧▽≦) 我就知道你要搜这个";
    },
    computed: {
        searchCategoryList() {
            return [{ value: null, label: '全部分区' }, ...Object.values(CategoryEnum)];
        },

        searchArticleTypeList() {
            return [{ value: null, label: '所有类型' }, ...Object.values(ArticleTypeEnum)];
        },
    },
    data() {
        return {
            searchContent: null,
            searchMainList: [{
                value: '0',
                label: '帖子'
            }, 
            // {
            //     value: '1',
            //     label: '用户'
            // }
        ],
            supplementInput: {
                main: 0,
                category: null,
                articleType: null,
                orderTpye: 0,
                pageNum: 1,
                pageSize: 10,
                userOrderType: 0,
            },
            postItemData: [
                {
                    id: 1,
                    title: "(chatgpt) 两层 g c n 提取最后一层节点输出特征，如何自定义简单数据集提取最后一层节点输出特征，如何自定义简单数据集提取最后一层节点输出特征，如何自定义简单数据集提取最后一层节点输出特征，如何自定义简单数据集提取最后一层节点输出特征，如何自定义简单数据集",
                    content: `如果没有全连接层 ()c
                    层），那么输出将是每个节点的特征。这样的话，标签需要对应每个节点的输出特征。在这种情况下，标签的维度应该是节点数乘以输出特征数。如果我们将输出特征数设为 1 ，并且没有．．提取最后一层节点输出特征，如何自定义简单数据集提取最后一层节点输出特征，如何自定义简单数据集提取最后一层节点输出特征，如何自定义简单数据集提取最后一层节点输出特征，如何自定义简单数据集`,
                    likeCount: 1,
                    nickname: "红豆面包",
                }
            ],
            userItemData: [
                {
                    userId: 1,
                    avatar: "",
                    nickname: "红豆面包",
                    fensNum: 9999,
                    articleNum: 99,
                }

            ],
            postOrderType: [
                {
                    value: '0',
                    label: '综合排序'
                }, {
                    value: '1',
                    label: '最新发布'
                }, {
                    value: '2',
                    label: '最多点赞'
                }, {
                    value: '3',
                    label: '最多收藏'
                }, {
                    value: '4',
                    label: '最多浏览'
                }
            ],
            userOrderType: [
                {
                    value: null,
                    label: '综合排序'
                }, {
                    value: '1',
                    label: '最多粉丝'
                }, {
                    value: '2',
                    label: '最多帖子'
                }
            ]
        }
    },
    methods: {
        rotateImage() {
            var img = document.getElementById('rotateImg');
            img.classList.toggle('rotated');
            var searchResult = document.getElementById('search_result');
            searchResult.classList.toggle('search_result_translate');
        },
        search(searchType) {
            if (searchType == 0) {
                request.get("posts", {
                    params: {
                        pageNum: this.supplementInput.pageNum,
                        pageSize: this.supplementInput.pageSize,
                        searchContent: this.searchContent,
                        categoryId: this.supplementInput.category,
                        articleType: this.supplementInput.articleType,
                        orderType: this.supplementInput.orderTpye
                    }
                }).then(res => {
                    this.postItemData = res;
                });
            } else if (searchType == 1) {
                request.get("sys_users/search", {
                    params: {
                        pageNum: this.supplementInput.pageNum,
                        pageSize: this.supplementInput.pageSize,
                        searchContent: this.searchContent,
                        orderType: this.supplementInput.orderTpye
                    }
                }).then(res => {
                    this.userItemData = res.data;
                });
            }
        },
        toDetail(id) {
            let url = `/PostDetail?id=${id}`;
            newPage(url);
        },
        searchRemember() {
            let jsonString = localStorage.getItem('userInfo');
            let userId = JSON.parse(jsonString).id;
            let searchContent = this.searchContent;
            // 检查参数是否为空
            if (!userId || !searchContent) {
                return;
            }

            // 发送 POST 请求来记录浏览
            request.post(`/userSearchRemember/add`, {
                userId: userId,
                searchContent: searchContent
            }).then(res => {
                // 检查请求是否成功
                if (res.code === 200) {
                    console.log('View added successfully');
                } else {
                    console.log('Failed to add view: ', res.msg);
                }
            }).catch(err => {
                console.log('Error adding view: ', err);
            });
        }

    },
}
</script>